<template>
  <div id="" class="">
    <div class="memberHeader" v-bind:style="{backgroundImage:'url('+backgroundImg+')'}" v-if="isLogin"><!-- 已登录 -->
      <img :src="imgUrl()" alt="" class="memberImg">
      <div class="memberinfo">
        <h2>{{memberInfo.nickName}}</h2>
        ID:{{memberInfo.userNo}}
      </div>
      <span class="message" @click="toMessage">
        <img src="@/assets/memberImage/information_icon.png" alt="" width="20">
      </span>
    </div>
    <div class="memberHeader" v-bind:style="{backgroundImage:'url('+backgroundImg+')'}" v-else
    @click="toLogin()"><!-- 未登录 -->
      <img :src="memberinfo.headPortrait" alt="" class="memberImg">
      <div class="memberinfo">
        <h2>{{memberinfo.nickName}}</h2>
        ID:{{memberinfo.userNo}}
      </div>
      <span class="message" @click.stop="toMessage">
        <img src="@/assets/memberImage/information_icon.png" alt="" width="20">
      </span>
    </div>
  </div>
</template>
<script>

export default {
  name: "",
  data: () => ({
    backgroundImg:require('@/assets/memberImage/background_image.png'),
    memberInfo:'',
    memberinfo:{
      headPortrait:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531888815490&di=88f5a4e67b315b39c7fac8c1dd1cde91&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg',
      nickName:'未登录',
      userNo:''
    },
    isLogin:true,   //true已登录
  }),
  methods: {
    toMessage() {
      this.$router.push({name:'myMessage'});
    },
    imgUrl() {
      let headPortrait = this.memberInfo.headPortrait;
      return this.$imgUrlLink(headPortrait);
    },
    // 去登录
    toLogin(){
      this.$router.push({name:'login'})
    },
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = window.localStorage.getItem('xlyd_loginInfo');
    console.log(xlyd_loginInfo);
    this.memberInfo = JSON.parse(xlyd_loginInfo);
    if(this.memberInfo) {
      this.isLogin = true;
    }else{
      this.isLogin = false;
    }
  }
}
</script>
<style lang="scss" scoped>
.memberHeader{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 20px 10px 100px;
  color: white;
  @include flex;
  position: relative;
  .memberImg{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border:2px solid white;
  }
  .memberinfo{
    @include flexcell;
    margin-left: 10px;
    line-height: 2em;
  }
  .message{
    position: absolute;
    top: 20px;
    right: 10px;
  }
}
</style>
